<template>
  <s-layout :title="'员工详情'" :navbar="normal" leftIconColor="#333" :autoBack="false" :leftIcon="leftIcon"
    :bgColor="state.bgColor" :tabbarshow='false' :titleStyle="{ color: '#FFF', fontSize: '32rpx' }">
    <view class="app" :style="{ backgroundImage: `url( ${baseUrl}/uploads/uniapp_image/staff/profile_bg.png)` }">
      <view class="header public" :style="{ paddingTop: (safeAreaInsets?.top + 44) + 'px' }">
        <up-avatar class="avatar" :font-size="14" :src="state.avatar" :size="state.size"></up-avatar>
        <view class="name">{{ state.nickname }}</view>
        <up-text class="phone" :text="state.role" :color="'#333'" :size="'28rpx'" :margin="'10rpx 0  0 0'"></up-text>
      </view>

      <!-- 内容 -->
      <view class="content ">
        <scroll-view scroll-y class="comprehensive" v-if="content">
          <view class="public item_wrap">
          <view class="title">员工信息</view>
          <view class="item">
            <view class="item_left">手机号：</view>
            <view class="item_right">{{ content.mobile }}</view>
          </view>
          <view class="item" v-if="content.email">
            <view class="item_left">电子邮箱：</view>
            <view class="item_right">{{ content.email }}</view>
          </view>
          <view class="item">
            <view class="item_left">入职状态：</view>
            <view class="item_right">{{ content.is_entry == 0?'未入职': content.is_entry == 1?'已入职':'已离职'}}</view>
          </view>
        </view>
        <view class="public item_wrap" v-if="content.authentication">
          <view class="title">实名信息</view>
          <view class="item">
            <view class="item_left">姓名：</view>
            <view class="item_right">{{ content.authentication.name }}</view>
          </view>
          <view class="item">
            <view class="item_left">身份证号：</view>
            <view class="item_right">{{ content.authentication.identity_id}}</view>
          </view>
          <view class="item">
            <view class="item_left">性别：</view>
            <view class="item_right">{{ content.authentication.gender == 1?'男':content.authentication.gender == 0?'女':'性别不详' }}</view>
          </view>
          <view class="item" v-if=" content.authentication.birthday">
            <view class="item_left">出生日期：</view>
            <view class="item_right">{{ content.authentication.birthday }}</view>
          </view>
          <view class="item_card">
            <view class="item_card_left">
              <view class="item_top">身份证反面</view>
              <view class="item_bottom">
                <image v-if="!content.authentication.reverses_image"  :src="`${baseUrl}/uploads/uniapp_image/user/sfz02.png`" mode="scaleToFill" />
                <image v-else :src="`${baseUrl}`+content.authentication.reverses_image" mode="scaleToFill" @tap="preview(content.authentication.reverses_image)"/>
              </view>
            </view>
            <view class="item_card_left">
              <view class="item_top">身份证正面</view>
              <view class="item_bottom">
                <image  v-if="!content.authentication.front_image" :src="`${baseUrl}/uploads/uniapp_image/user/sfz01.png`" mode="scaleToFill" />
                <image v-else :src="`${baseUrl}`+content.authentication.front_image" mode="scaleToFill" @tap="preview(content.authentication.front_image)"/>
              </view>
            </view>
          </view>
        </view>
        </scroll-view>
     
      </view>
    </view>
  </s-layout>

</template>

<script setup>
import { baseUrl } from '@/sheep/config';
import sheep from '@/sheep';
import { onLoad, onReachBottom, onShow } from "@dcloudio/uni-app";
import { ref, reactive } from 'vue';
const { safeAreaInsets } = uni.getSystemInfoSync()
const state = ref({
  bgColor: 'rgba(0,0,0,0)',
  size: '120rpx',
  avatar:'',
  nickname:'',
  role:''

})
const ids = ref()
const content = ref()
onLoad((options)=>{
  ids.value = options.ids
  getEntryStaffDetail()
})
const getEntryStaffDetail = async () => {
  let params = {
    ids:ids.value 
  };
  const res = await sheep.$api.user.getEntryStaffDetail(params);
  content.value = res.data
  state.value.avatar = `${baseUrl}`+ res.data.avatar
  state.value.nickname = res.data.nickname
  state.value.role =  res.data.group.name
}

// 预览图片
const preview = (img) => {
  uni.previewImage({
    urls:[`${baseUrl}${img}`]
  })
}


</script>

<style lang="scss" scoped>
.app {
  background-size: 100%;
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* 头像 */
.header {
  height: 354rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 20rpx;

  :deep(.u-avatar__image) {
    box-shadow: 0px 4px 14px 0px rgba(76, 171, 255, 0.5);
  }

  :deep(.u-text) {
    flex: inherit !important;
    width: auto !important;
    flex-direction: inherit;
    color: $uni-text-color;
  }

  .name {
    font-family: PingFangSC;
    color: $uni-text-color;
    font-weight: 500;
    font-size: 46rpx;
    margin-top: 18rpx;
  }

  .phone {
    font-weight: 400;
  }


}

// / 公共
.public {
  width: calc(100% - 40rpx);
  margin: 0 20rpx;
}

//内容
.content {
  border-radius: 28rpx 28rpx 0 0;
  background-color: #F4F6FA;
  width: 100%;
  height: auto;
  padding: 30rpx 0;

  .item_wrap {
    border-radius: 16rpx;
    background-color: #FFFFFF;
    box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.05);
    margin-bottom: 30rpx;
    padding-bottom: 30rpx;

    .title {
      padding: 20rpx 0 0 30rpx;
      font-family: PingFangSC;
      color: $uni-text-color;
      font-weight: $uni-font-weight;
      font-size: 34rpx;
      height: 90rpx;
      line-height: 90rpx;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        bottom: 23rpx;
        left: 7%;
        z-index: 9;
        width: 92rpx;
        height: 14rpx;
        border-radius: 10rpx;
        background-color: rgba(0, 56, 247, 0.5);
      }
    }

    .item {
      width: 85%;
      margin: 0 auto 30rpx auto;
      border-radius: 16rpx;
      background-color: #F9FAFF;
      display: flex;
      justify-content: space-between;
      padding: 0 20rpx;
      align-items: center;
      height: 100rpx;
      &:last-child{
        margin-bottom: 0;
      }
      .item_left {
        font-family: PingFangSC;
        color: $uni-text-color;
        font-weight: 500;
       font-size:$uni-font-size-26;
      }

      .item_right {
        font-family: PingFangSC;
        color: #999999;
        font-weight: 500;
       font-size:$uni-font-size-26;
      }
    }
    .item_card{
      width: 93%;
      margin: 0 auto 30rpx auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .item_card_left{
        width: 49%;
        margin-bottom: 30rpx;
      }
      .item_top{
        height: 90rpx;
        display: flex;
        align-items: center;
        color: #AAAAAA;
        font-weight: 400;
        font-size: $uni-font-size-base;
        padding-left: 20rpx;
      }
      .item_bottom{
        width: 100%;
        border-radius: 12rpx;
        background-color: #FFFFFF;
        border: 2rpx solid #F2F2F2;
        image{
          width: 100%;
          height: 200rpx;
        }

      }
    }
  }
}

.comprehensive {
  width: 100%;
  background-color: rgba(0, 0, 0, 0);
  height: 65vh;
}
:deep(.u-icon__icon) {
	background: $uni-bg-color;
	width: 64rpx;
	height: 64rpx;
	justify-content: center;
	border-radius: 50%;
  
}
</style>